<template>
	<div class="cus-select">
		<div class="item-con flex" @click="changeShow">
			<el-input
				readonly
				:placeholder="placeholder"
				v-model="currLabel"
				:disabled="disabled"
			/>
			<i class="el-icon-caret-bottom icon" />
		</div>
		<van-popup v-model="popShow" round position="bottom">
			<van-picker
				ref="van_picker"
				show-toolbar
				:columns="columns"
				@confirm="confirm"
				@cancel="cancel"
				:default-index="currIdx"
			/>
		</van-popup>
	</div>
</template>

<script>
import { Picker, Popup } from "vant";
export default {
	components: {
		VanPicker: Picker,
		VanPopup: Popup
	},
	props: {
		list: Array,
		label: String,
		prop: String,
		placeholder: String,
		value: [String, Number],
		disabled: {
			type: Boolean,
			default: false
		},
		type: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			popShow: false,
			currVal: this.value
		};
	},
	computed: {
		currLabel() {
			const { value, columns, currIdx } = this;
			if (value == null || value == undefined) return "";
			let curr = columns[currIdx];
			if (!curr) return "";
			return curr.text;
		},
		currIdx() {
			let idx = this.columns.findIndex(v => v.value === this.value);
			return idx > -1 ? idx : null;
		},
		columns() {
			return this.list.map(v => ({
				text: v[this.label],
				value: v[this.prop]
			}));
		}
	},
	watch: {
		value(v) {
			console.log(v);
			this.currVal = v;
		},
		popShow(e) {
			if (!e) {
				this.$refs.van_picker.setIndexes([this.currIdx]);
			}
		}
	},
	methods: {
		confirm(e) {
			this.currVal = e.value;
			this.$emit("input", e.value);
			this.$emit("change");
			this.popShow = false;
		},
		cancel() {
			this.popShow = false;
		},
		changeShow() {
			if (this.disabled) return;
			this.popShow = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.cus-select {
	.item-con {
		align-items: center;
		padding-bottom: 0.1rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
}
::v-deep .el-input.is-disabled .el-input__inner {
	background-color: transparent;
}
</style>
